<template>
    <div class="PGD">
        <div class="form">
            <el-form
                ref="formdata"
                :model="formdata"
                :rules="rules"
                class="demo-ruleForm">
                <div class="form_title">PGD算法</div>
                <el-form-item label="eps值" prop="pgd_eps">
                    <el-input v-model.number="formdata.pgd_eps">{{formdata.pgd_eps}}</el-input>
                </el-form-item>
                <el-form-item label="alpha值" prop="pgd_alpha">
                    <el-input v-model.number="formdata.pgd_alpha">{{formdata.pgd_alpha}}</el-input>
                </el-form-item>
                <el-form-item label="step值" prop="pgd_steps">
                    <el-input v-model.number="formdata.pgd_steps">{{formdata.pgd_steps}}</el-input>
                </el-form-item>
                <el-form-item label="模型" prop="model">
                    <!-- {{formdata.model}} -->
                    <el-select v-model="formdata.model" placeholder="请选择模型">
                    <el-option label="VGG" value="VGG"></el-option>
                    <el-option label="ResNet" value="ResNet"></el-option>
                    <el-option label="mobileNet" value="mobileNet"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="数据集" prop="dataset">
                    <!-- {{formdata.dataset}} -->
                    <el-select v-model="formdata.dataset" placeholder="请选择数据集">
                    <el-option label="CH2_DATA" value="CH2_DATA"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="输出文件名" prop="out_path">
                    <!-- {{formdata.out_path}} -->
                    <el-input v-model="formdata.out_path"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitFormdata('formdata')">提交</el-button>
                    <el-button type="danger"  @click="resetFormdata('formdata')">重置</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="imgDiv">
            <el-alert v-if="errorMessage" :title="errorMessage" type="error" show-icon></el-alert>
            <!-- 这里往下就是展示区了 -->
            <el-divider>对抗样本效果展示</el-divider>
            <!-- 首先展示的是文件的输出路径 -->
            <template v-if="formdata.gen_path">
                <div class="gen">
                    对抗样本生成路径：{{formdata.gen_path}}
                </div>
            </template>
          <ShowImg :name="'PGD'" :modeling="formdata"/>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import ShowImg from './div_level/ShowImg.vue'
    import {addSessionStorage} from '../assets/js/utils'
    export default {
        name: 'PGDTable',
        components:{ShowImg},
        data(){
            return {
                formdata:{
                    pgd_eps:8 / 255,
                    pgd_alpha: 2/255,
                    pgd_steps: 100,
                    model: '',
                    dataset: '',
                    out_path: '',
                    gen_path: ''
                },
                rules:{
                    //eps名字必须与上面eps一样，泪目，学艺不精
                    pgd_eps:[
                        { required: true, message: '请输入eps值'},
                        {type:'number',message:'eps值必须为数字'}
                    ],
                    pgd_alpha:[
                        { required: true, message: '请输入alpha值'},
                        {type:'number',message:'alpha值必须为数字'}
                    ],
                    pgd_steps:[
                        { required: true, message: '请输入step值'},
                        {type:'number',message:'step值必须为数字'}
                    ],
                    model: [
                        { required: true, message: '请选择模型', trigger: 'change' }
                    ],
                    dataset: [
                        { required: true, message: '请选择数据集', trigger: 'change' }
                    ],
                    out_path:[
                        {required:false,message:'请输入输出文件夹名称，否则系统默认命名'},
                    ]
                },
                errorMessage:'',
                images:[]
                // fileList:null
            }
        },
        methods:{
            submitFormdata(Formname){
                console.log(this.$refs)
                this.$refs[Formname].validate(
                    (valid,unpass)=>{
                        if(valid){
                            this.errorMessage = ''
                            const loading = this.$loading({
                                lock: true,
                                text: 'Loading',
                                spinner: 'el-icon-loading',
                                background: 'rgba(0, 0, 0, 0.7)'
                            });
                            //加‘/’代表绝对路径
                            axios.post('/api/wbt/pgd',{
                                parameter:{
                                    pgd_eps:this.formdata.pgd_eps,
                                    pgd_alpha:this.formdata.pgd_alpha,
                                    pgd_steps:this.formdata.pgd_steps
                                },
                                model:this.formdata.model,
                                dataset:this.formdata.dataset,
                                out_path:this.formdata.out_path
                            }).then(
                                res=>{
                                 loading.close()
                                    this.formdata.gen_path = res.data.gen_path
                                    addSessionStorage('PGD',JSON.stringify(
                                        {
                                            gen_path:this.formdata.gen_path
                                        }
                                    ))
                                    this.images = res.data.image
                                    this.$bus.$emit('img_pass',this.images)
                                    sessionStorage.setItem('PGD_Table',JSON.stringify(
                                        {
                                            formdata: this.formdata,
                                            images: this.images
                                        }
                                    ))
                                  this.$DailyRecord(res.data.status == 200?'操作成功':'操作失败','PGD',this.formdata)

                                  // console.log(this.images)
                                    // console.log(JSON.stringify(res));
                                    // alert(JSON.stringify(res));
                                }
                            )
                        }else{
                            let messages = Object.keys(unpass).map(key => {
                                return unpass[key][0].message;
                            }).join('<br>')
                            this.$notify({
                                title:'提示',
                                message:messages,
                                offset: 120,
                                type:'warning',
                                dangerouslyUseHTMLString: true
                            })
                        }
                    }
                )
            },
            resetFormdata(Formname){
                //返回初始状态
                this.$refs[Formname].resetFields()
                this.formdata.gen_path = ''
                this.images = []
                this.$bus.$emit('img_pass',this.images)
                sessionStorage.setItem('PGD_Table',JSON.stringify(
                    {
                        formdata: this.formdata,
                        images: this.images
                    }
                ))
            }
        },
        mounted(){
            try{
                this.images = JSON.parse(sessionStorage.getItem('PGD_Table')).images || []
                this.$bus.$emit('img_pass',this.images)
                this.formdata = JSON.parse(sessionStorage.getItem('PGD_Table')).formdata || {
                    pgd_eps:8 / 255,
                    pgd_alpha: 2/255,
                    pgd_steps: 100,
                    model: '',
                    dataset: '',
                    out_path: '',
                    gen_path: ''
                }
            }catch(e){
                this.images = []
                this.$bus.$emit('img_pass',this.images)
                this.formdata = {
                    pgd_eps:8 / 255,
                    pgd_alpha: 2/255,
                    pgd_steps: 100,
                    model: '',
                    dataset: '',
                    out_path: '',
                    gen_path: ''
                }
            }
        }
    }
</script>
<style scoped>
@import url('../assets/css/wbt_form.css');
.PGD{
    width:100vh;
    margin:0 auto;
}
</style>
